<template>
  <div class="main">
    <div class="head">
      <div class="headfig" @click="handleGallery">
        <router-link  to="/" tag="a" class="back">
          <span class="header-ico iconfont">&#xe6a8;</span>
        </router-link>
        <img class="headfig-img" :src="banner">
      </div>
      <div class="head-info">
        <div class="head-title">
          {{name}}
        </div>
      </div>
      <div class="head-icon">
        <span class="iconfont">&#xe638; </span>
        <em class="number">{{gallery.length}}</em>
      </div>
    </div>
    <gallery v-show="isShow" @hide-gall="handleHide" :gallery="gallery"></gallery>
    <div class="header" v-show="hide" @scroll="hides" :style="opObj">
      <div class="header-back">
        <router-link class="header-font" to="/" tag="span">
          <span class="iconfont">&#xe6a8;</span>
        </router-link>
        <span class="header-text">景点详情</span>
      </div>
    </div>
  </div>
</template>

<script>
import Gallery from '@/componets/gallery/Gallery.vue'
export default {
  name: 'DetailImgroll',
  components: {
    Gallery
  },
  props: {
    name: String,
    banner: String,
    gallery: Array
  },
  data () {
    return {
      isShow: false,
      hide: false,
      opObj: {
        opacity: 0
      }
    }
  },
  methods: {
    handleGallery () {
      this.isShow = true
    },
    handleHide () {
      this.isShow = false
    },
    hides () {
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop
      let shows = this.scroll / 150
      this.opObj.opacity = shows
      this.hide = true
    }
  },
  mounted () {
    window.addEventListener('scroll', this.hides)
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .head
    position relative
    .headfig
      overflow hidden
      height 0
      width 100%
      padding-bottom 55%
      .headfig-img
        width 100%
        vertical-align top
    .head-info
      position absolute
      right 0.2rem
      bottom 0.2rem
      left 0.2rem
      min-height 0.4rem
      .head-title
        position absolute
        z-index 1
        line-height 0.4rem
        color #FFFFFF
        font-size 0.36rem
        text-shadow 0 1px 2px rgba(0,0,0,0.70)
    .head-icon
      position absolute
      right 0
      bottom 0.2rem
      width: 1.2rem
      height: 0.4rem
      background rgba(0,0,0,.5)
      border-radius 0.2rem
      font-size 0.24rem
      color: #fff
      line-height 0.4rem
      text-align center
      /* .number
        margin-left .rem */
    .back
      left 0.1rem
      top 0.1rem
      width 0.72rem
      height 0.72rem
      line-height 0.72rem
      position absolute
      font-size 0.36rem
      color #fff
      text-align center
      background #666666
      border-radius 0.4rem
  .header
    background #00bcd4
    width 100%
    height 0.88rem
    line-height 0.88rem
    position fixed
    top 0
    z-index 9
  .header-back
    width 0.88rem
    padding 0 0.1rem
    color white
    text-align center
    width 100%
  .header-font
    float left
    height 0.88rem
  .header-text
    font-size 0.32rem
</style>
